<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide('formValidate')"
      :mask-closable="false"
      width="80vw"
    >
      <Form
        ref="formValidate"
        :model="params"
        :rules="ruleValidate"
        label-position="left"
        inline
      >
        <FormItem label="工厂名称：" prop="poiName">
          <Input v-model.trim="params.poiName" placeholder="请输入工厂名称" />
        </FormItem>
        <FormItem label="工厂编码:" prop="factoryCode">
          <Input
            v-model.trim="params.factoryCode"
            placeholder="请输入工厂编码"
            :disabled="type != 2"
          />
        </FormItem>
        <FormItem label="省市区:" prop="region">
          <Cascader
            :data="regionDataList"
            v-model="region"
            @on-change="regionChange"
            placeholder="请选择省市县"
          ></Cascader>
        </FormItem>
        <FormItem label="收件地址" prop="address">
          <Input v-model.trim="params.address" placeholder="请输入收件地址" style="width: 400px;" />
        </FormItem>
        <FormItem label="收件联系人" prop="contact">
          <Input v-model.trim="params.contact" placeholder="请输入收件联系人" />
        </FormItem>
        <FormItem label="收件联系方式" prop="mobile">
          <Input
            v-model.trim="params.mobile"
            placeholder="请输入收件联系方式"
          />
        </FormItem>
        <FormItem label="月结账户" prop="monthlyCard">
          <Input
            v-model.trim="params.monthlyCard"
            placeholder="请输入月结账户"
          />
        </FormItem>
        <FormItem label="快递类型" prop="deliveryType">
          <Select
            v-model="params.deliveryType"
            placeholder="快递类型"
            clearable
            style="min-width: 150px;"
          >
            <Option value="sf">顺丰</Option>
            <Option value="jd">京东</Option>
          </Select>
        </FormItem>
        <FormItem label="取件联系人" prop="sendContact">
          <Input
            v-model.trim="params.sendContact"
            placeholder="请输入取件联系人"
          />
        </FormItem>
        <FormItem label="取件联系方式" prop="sendMobile">
          <Input
            v-model.trim="params.sendMobile"
            placeholder="请输入取件联系方式"
          />
        </FormItem>
        <FormItem label="取件省市区:" prop="backRegion">
          <Cascader
            :data="regionDataList"
            v-model="backRegion"
            @on-change="regionChange"
            placeholder="请选择省市县"
          ></Cascader>
        </FormItem>
        <FormItem label="取件地址" prop="sendAddress">
          <Input
            v-model.trim="params.sendAddress"
            placeholder="请输入取件地址"
            style="width: 400px;"
          />
        </FormItem>
        <FormItem label="寄回快递类型" prop="backDeliveryType">
          <Select
            v-model="params.backDeliveryType"
            placeholder="寄回快递类型"
            clearable
            style="min-width: 150px;"
          >
            <Option value="sf">顺丰</Option>
            <Option value="jd">京东</Option>
          </Select>
        </FormItem>
        <FormItem label="寄回月结账户" prop="backMonthlyCard">
          <Input
            v-model.trim="params.backMonthlyCard"
            placeholder="请输入寄回月结账户"
          />
        </FormItem>
        <FormItem label="应用KEY" prop="appKey">
          <Input v-model.trim="params.appKey" placeholder="请输入应用KEY" />
        </FormItem>
        <FormItem label="应用Secret" prop="appSecret">
          <Input
            v-model.trim="params.appSecret"
            placeholder="请输入应用Secret"
          />
        </FormItem>

        <FormItem label="是否使用" prop="isUse">
          <i-switch v-model="params.isUse">
            <template #open>
              <span>是</span>
            </template>
            <template #close>
              <span>否</span>
            </template>
          </i-switch>
        </FormItem>
      </Form>

      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button
          v-if="type != 1"
          type="primary"
          @click="handleSubmit('formValidate')"
          :loading="loadingBtn"
        >
          <span v-if="!loadingBtn">确定</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
    import {
      platformList,
      companyList,
      serviceCodeList
    } from '@/constant/program';

    export default {
      name: 'factory-ope',
      data() {
        return {
          region: [],
          backRegion: [],
          companyList,
          serviceCodeList,
          platformList,
          isShowModal: false,
          loadingBtn: false,
          title: '工厂信息',
          type: 0,
          action: this.$uploadURL,
          headers: {
            token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
          },

          params: {
            address: '',
            appKey: '',
            appSecret: '',
            backDeliveryType: '',
            backMonthlyCard: '',
            city: '',
            contact: '',
            county: '',
            deliveryType: '',
            factoryCode: '',
            id: '',
            isUse: true,
            mobile: '',
            monthlyCard: '',
            poiName: '',
            province: '',
            sendAddress: '',
            sendCity: '',
            sendContact: '',
            sendCounty: '',
            sendMobile: '',
            sendProvince: ''
          },
          ruleValidate: {
            platform: [
              { required: true, message: '平台不能为空', trigger: 'change' }
            ],
            programAppid: [
              { required: true, message: '工厂ID不能为空', trigger: 'change' }
            ],
            programName: [
              { required: true, message: '工厂名不能为空', trigger: 'change' }
            ]
          }
        };
      },
      methods: {
        regionChange(val) {
          console.log('region', val);
          setTimeout(() => {
            console.log(this.regionDetail);
          }, 200);
        },
        // 点击提交验证
        handleSubmit(name) {
          // console.log(this.params);
          this.$refs[name].validate(valid => {
            if (valid) {
              // this.$Message.error('验证通过');
              /**
               * type判断
               * 1.查看 2.新增 3.编辑
               */
              switch (this.type) {
                case 1:
                  // this.title = '查看分类';
                  break;
                case 2:
                  // 新增分类
                  this.addProgram();
                  break;
                case 3:
                  // 编辑分类
                  this.updateMallGoodsType();
                  break;
                default:
                  this.$Notice.error({
                    title: '工厂管理',
                    desc: '查看，新增，编辑区分判断报错',
                    duration: 0
                  });
                  break;
              }
            } else {
              this.$Message.error('还有信息没有填写合格哦~');
            }
          });
        },
        // 显示模态框
        show(type, row) {
          this.isShowModal = true;
          this.type = type;
          this.params = {
            address: '',
            appKey: '',
            appSecret: '',
            backDeliveryType: '',
            backMonthlyCard: '',
            city: '',
            contact: '',
            county: '',
            deliveryType: '',
            factoryCode: '',
            id: '',
            isUse: true,
            mobile: '',
            monthlyCard: '',
            poiName: '',
            province: '',
            sendAddress: '',
            sendCity: '',
            sendContact: '',
            sendCounty: ''
          };
          /**
           * type判断
           * 1.查看 2.新增 3.编辑
           */
          switch (type) {
            case 1:
              this.title = '查看';
              this.queryProgramInfo(row);
              break;
            case 2:
              this.title = '新增';
              break;
            case 3:
              this.title = '编辑';
              this.queryProgramInfo(row);
              break;
            default:
              this.$Notice.error({
                title: '工厂管理',
                desc: '查看，新增，编辑模态框报错',
                duration: 0
              });
              break;
          }
        },
        // 新增
        addProgram() {
          this.$Spin.show();
          const regionNameList = this.getRegionNameList(this.getRegionDetail(this.region));
          const backRegionNameList = this.getRegionNameList(this.getRegionDetail(this.backRegion));
          const params = {
            ...this.params,
            isUse: this.params.isUse == true ? 1 : 0,
            province: regionNameList[0],
            city: regionNameList[1],
            county: regionNameList[2],
            sendProvince: backRegionNameList[0],
            sendCity: backRegionNameList[1],
            sendCounty: backRegionNameList[2]
          };
          this.axios.post('/factory/addFactory', params).then(res => {
            if (res.status == 200) {
              this.$emit('changeDate');
              this.$Message.success('操作成功.');
              this.hide('formValidate');
            }
            if (res.status == 201) {
              this.$Message.error(res.msg);
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '新增工厂接口报错',
                duration: 0
              });
            }
          }).finally(() => {
            this.$Spin.hide();
          })
        },
        // 编辑分类
        updateMallGoodsType() {
          this.$Spin.show();
          this.axios.post('/program/updateProgram', this.params).then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$emit('changeDate');
              this.$Message.success('操作成功.');
              this.hide('formValidate');
            }
            if (res.status == 201) {
              this.$Message.error(res.msg);
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '编辑工厂接口报错',
                duration: 0
              });
            }
          });
        },
        // 查询分类详情
        queryProgramInfo(row) {
          this.$Spin.show();
          console.log(row);
          this.axios
            .get('/factory/detail', {
              params: {
                factoryCode: row.factoryCode
              }
            })
            .then(res => {
              if (res.status == 200) {
                this.params = {
                  ...res.data,
                  isUse: res.data.isUse == 1 ? true : false,
                }
                const {province, city, county} = res.data;
                const {sendProvince, sendCity, sendCounty} = res.data;
                this.region = this.transformRegionByLabel([province, city, county]);
                this.backRegion = this.transformRegionByLabel([sendProvince, sendCity, sendCounty]);
                console.log(this.region);
              }
              if (res.status == 500) {
                this.$Notice.error({
                  title: '服务器内部错误',
                  desc: '工厂详情接口报错',
                  duration: 0
                });
              }
            }).finally(() => {
              this.$Spin.hide();
            });
  
        },

        // 关闭模态框
        hide(name) {
          this.isShowModal = false;
          this.params.goodsMallTypeId = '';

          this.$refs[name].resetFields();
        }
      }
    };
</script>

<style scoped></style>
